<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { getQuestions } from '@/api/psychology/task.js'
	import { onBackPress } from "@dcloudio/uni-app"



	const number = 34;
	const time = 4;

	const props = defineProps({
		tabIds: {
			type: [Array, String],
			default: ''
		},
		taskId: {
			type: String,
			defalut: ''
		},
		tabName: {
			type: [Array, String],
			default: ''
		},
	})
	const taskObj = ref<object>({})
	const showPopup = ref(false)

	const isOut = ref(false)

	onBackPress((e) => {
		console.log('onBackPress', e)
		showPopup.value = true;

		if (isOut.value) {
			return false;
		} else {
			return true;

		}


	})

	const back = () => {
		console.log('onBackPress', history)
		showPopup.value = true;
	}
	const exit = (() => {
		showPopup.value = false
		isOut.value = true
		// uni.navigateBack();
		// if (history) {
		// 	history.back()
		// } else {
		uni.navigateTo({
			url: '/pages/evaluation/taskList/taskList'
		})
		// }


	})

	onMounted(() => {
		getQuestions(props.tabIds, props.taskId).then(res => {
			if (res.data.code == 200) {
				taskObj.value = res.data.data
				console.log('量表题目', taskObj.value)

			}
		}).catch(error => {
			console.log(error)
		})
	}
	)

	const lead = () => {
		uni.navigateTo({
			url: `/pages/evaluation/question/question?tabIds=${props.tabIds}&taskId=${props.taskId}`
		});
	}
	console.log('props.tabIds==>', props.tabIds, 'props.taskId===>', props.taskId)
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
<articleTable ref="timer"></articleTable>
	<view @touchend="handleEnd" class="wh100p "
		style="justify-content: center; align-items: center;background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);">
		<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" title="提示"
			style="height: 3vh;">
		</Navigator>
		<u-modal :show="showPopup" showCancelButton width="550rpx" @confirm="exit" @cancel="showPopup = false"
			confirmColor='#0078BB'>
			<view>
				<text style="font-size: 0.8rem;">是否确定要退出测试</text>
			</view>
		</u-modal>

		<view class="w100p flex-center" style="height: 80%;">
			<view style="padding: 24rpx 5% 0rpx 5%;box-sizing: border-box;max-width: 1400px;">
				<view class="bgfffff" style="margin-top:5%;">
					<view class="flex-around w100p title">
						<text style="margin-top: 30rpx;">{{tabName}}</text>
					</view>
					<view class="flex-around w100p " style="padding: 10rpx 20rpx 4% 20rpx;margin-top: 5%;">
						<view>
							<text class="font20">{{taskObj.queCount}}</text> 道题
						</view>
						<view>
							<text class="font20">{{taskObj.minute}}
							</text> 分钟
						</view>
					</view>
				</view>
				<view class="bgfffff mt2 pt8 flex-column align-center "
					style="padding-bottom: 5%;align-items: center;padding-top: 1%;height: 70%;">
					<view class="box ">
						<p> 1.本测试旨在探索您的个性特点、心理偏好和行为模式。请您尽量真实地回答问题，不要刻意选择答案。</p>
						<p> 2.每个问题都有多个选项，请选择您认为最符合自己的答案。如果没有完全符合的选项，选择最接近的答案即可。</p>
						<p> 3.回答问题时，请尽量不受他人期望、社会压力或自我设限的影响。只关注自己内心真实的感受和想法。</p>
						<p> 4.测试结果仅供参考，不代表您的全部个性特点和行为方式。请不要过于依赖测试结果做出重大决策，如有需要，请咨询专业心理咨询师进行进一步的评估和指导。</p>
						<p> 5.最后，感谢您的参与！请放松心情，享受测试的过程，并对您的勇气和开放性表示赞赏。让我们开始吧！</p>
					</view>
					<view class=" flex-center w100p" style="margin-top: 3%;">
						<view>
							<button type="primary" style="min-width: 300rpx;margin-top: 50rpx;"
								class="gui-button gui-gtbg-green gui-noborder" @click="lead">
								<text class="gui-color-white gui-button-text" style="font-size: 20px;">开始答题</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- <Navigator :fixed="true" background-color="#fa973a" status-bar left-icon="back" left-text="返回" customLeft
		@clickLeft="back" title="小提示"></Navigator>
	<u-modal :show="showPopup" showCancelButton width="550rpx" @confirm="exit" @cancel="showPopup = false"
		confirmColor='#ec9c01'>
		<view>
			<text style="font-size: 0.8rem;">是否确定要退出测试</text>
		</view>
	</u-modal>
	<view class="wh100p flex-center">
		<view style="padding: 24rpx 5% 0rpx 5%;box-sizing: border-box;max-width: 1400px;">
			<view class="bgfffff" style="margin-top: 20rpx;">
				<view class="flex-around w100p title">
					<text style="margin-top: 30rpx;">{{tabName}}</text>
				</view>
				<view class="flex-around w100p " style="padding: 10rpx 20rpx 40rpx 20rpx;margin-top: 60rpx;">
					<view>
						<text class="font20">{{taskObj.queCount}}</text> 道题
					</view>
					<view>
						<text class="font20">{{taskObj.minute}}
						</text> 分钟
					</view>
				</view>
			</view>
			<view class="bgfffff mt4 pt8 flex-column align-center "
				style="padding-bottom: 5%;align-items: center;padding-top: 1%;gap:50rpx">
				<view class="box ">
					<p> 1.本测试旨在探索您的个性特点、心理偏好和行为模式。请您尽量真实地回答问题，不要刻意选择答案。</p>
					<p> 2.每个问题都有多个选项，请选择您认为最符合自己的答案。如果没有完全符合的选项，选择最接近的答案即可。</p>
					<p> 3.回答问题时，请尽量不受他人期望、社会压力或自我设限的影响。只关注自己内心真实的感受和想法。</p>
					<p> 4.测试结果仅供参考，不代表您的全部个性特点和行为方式。请不要过于依赖测试结果做出重大决策，如有需要，请咨询专业心理咨询师进行进一步的评估和指导。</p>
					<p> 5.最后，感谢您的参与！请放松心情，享受测试的过程，并对您的勇气和开放性表示赞赏。让我们开始吧！</p>
				</view>
				<view class=" flex-center w100p">
					<view>
						<button type="primary" style="min-width: 300rpx;margin-top: 50rpx;"
							class="gui-button gui-gtbg-green gui-noborder" @click="lead">
							<text class="gui-color-white gui-button-text">开始答题</text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<style>
	.box {
		text-indent: 1rem;
		line-height: 3rem;
		padding: 40rpx;
		
		text-align: start;
		width: 90%;
		font-size: 1.5rem;
		margin: 0 30rpx 0 30rpx;
		background-color: white;
		/* border: 1rpx dotted gainsboro; */
		color: #7b7b7b;
	}

	.head {
		color: red;
		font-size: 1rem;
	}

	.title {
		font-size: 64rpx;
		color: rgba(50, 42, 35, 1);
		font-weight: 600;
		/* color: rgba(255, 217, 181, 0.80);
		text-shadow: #ec9c01 1rpx 0 0, #ec9c01 0 1rpx 0, #ec9c01 -1rpx 0 0, #ec9c01 0 -1rpx 0; */
		text-align: center;
		padding-top: 3%;
	}

	.btn {
		font-size: 1.2rem;
		float: left;
		width: 50%;
		text-align: center;
		
	}

	.empty {
		height: 100vh;
	}

	.name1 {
		font-size: 1rem;
		margin-bottom: 5rpx;
		color: black;
	}

	page {
		background: linear-gradient(rgba(255, 217, 181, 0.80), #f3f3f3);
		/* background: linear-gradient(#77b6fa, #f3f3f3); */

	}
</style>